<template>
  <div ref="chart" wh-full></div>
</template>
<script setup>
import useChart from '@/hooks/UseCharts'
const chart = ref(null)
const { setOption, showLoading } = useChart(chart,{ autoChartSize: true })
const props = defineProps({
  comData: {
    type: Array,
    default: () => {
      return []
    }
  },
  // x轴label是否需要换行
  breakXLable: {
    type: Boolean,
    default: false
  }
})

// ["成都市", "自贡市", "攀枝花市", "泸州市", "德阳市", "绵阳市", "广元市", "遂宁市", "内江市", "乐山市", "南充市", "眉山市", "宜宾市", "广安市",…]
const colorList = ['#0396FF','#32CCBC','#F6416C']
// [5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
// [2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
// [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
const series = computed(() => {
  let series = [
    // {
    //   name: '',
    //   data: props.comData.seriesData,
    //   type: 'bar',
    //   barWidth: 20
    // }
  ]
  props.comData.slice(1).map((item,index)=>{
    series.push({
      name:item.name,
      data:item.data,
      type:'bar',
      itemStyle:{
        color:colorList[index]
      }
    })
  })
  
  return series
})
const chartOption = computed(() => ({
  grid: {
    left: '2%',
    top: '12%',
    bottom: '5%',
    right: '2%',
    containLabel: true
  },
  legend: {
    show: true,
    top: -2
  },
  tooltip: {
    trigger: 'axis', //触发类型 柱状图
    axisPointer: { type: 'shadow' } //触发效果 移动上去 背景效果
  },
  xAxis: {
    data: props.comData[0],
    // boundaryGap: false,
    axisLine: {
      show: false
    },
    axisTick: {
      // show: false
    },
    axisLabel: {
      interval: 0,
      textStyle: {
        // color: '#fff',
        fontSize: 14
      },
      rotate: props.breakXLable ? 45 : 0,
      // 如果需要换行label文字
      formatter: params => {
        if (!props.breakXLable) {
          return params
        }
        var newParamsName = ''
        if (params.length <= 4) {
          newParamsName = params
        } else {
          newParamsName = params.substring(0, 4) + '...'
        }
        return newParamsName

        // var newParamsName = '';
        // var paramsNameNumber = params.length;
        // var provideNumber = 5; // 一行显示几个字
        // var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
        // if (paramsNameNumber > provideNumber) {
        //   for (var p = 0; p < rowNumber; p++) {
        //     var tempStr = '';
        //     var start = p * provideNumber;
        //     var end = start + provideNumber;
        //     if (p == rowNumber - 1) {
        //       tempStr = params.substring(start, paramsNameNumber);
        //     } else {
        //       tempStr = params.substring(start, end) + '\n';
        //     }
        //     newParamsName += tempStr;
        //   }
        // } else {
        //   newParamsName = params;
        // }
        // return newParamsName;
      }
    }
  },
  yAxis: {
    ayisLine: {
      show: false
    },
    // x轴刻度线文字颜色
    axisLabel: {
      textStyle: {
        // color: '#fff',
        fontSize: 14
      }
    },
    // x轴线
    splitLine: {
      show: true,
      lineStyle: {
        color: '#5389A2',
        type: 'dashed'
      }
    },
    // Y轴
    axisLine: {
      lineStyle: {
        // color: '#fff',
      }
    }
  },
  series: series.value
}))
onMounted(() => {
  showLoading()
})
watch(
  () => props.comData,
  () => {
    setOption(chartOption.value)
  },
  { deep: true }
)
</script>
<style lang="scss" scoped></style>
